<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>更换头像</span>
    </div>
    <!-- 图片 -->
    <img
      class="preview"
      src="@/assets/images/avatar.jpg"
      alt=""
      v-if="url === ''"
      style="height: 350px; width: 350px; object-fit: cover"
    />
    <img class="preview" :src="url" alt="" v-else />
    <!-- 两个按钮 -->
    <div class="mybtn">
      <el-button type="primary" icon="el-icon-plus" @click="uploadPic">选择图片</el-button>
      <input type="file" ref="inp" @change="preview" style="display: none" />
      <!-- :disabled="url === ''"用路径是否为空来控制按钮是否禁用 -->
      <el-button type="success" :disabled="url === ''" icon="el-icon-upload" @click="updateAvatar"
        >上传头像</el-button
      >
    </div>
  </el-card>
</template>

<script>
import { updateImgAPI } from '@/api/user'
export default {
  data() {
    return {
      url: ''
    }
  },
  methods: {
    // 点击上传图片 弹出文件框
    uploadPic() {
      this.$refs.inp.click()
    },

    // 预览图片 触发change事件，预览图片
    preview() {
      if (this.$refs.inp.files.length > 0) {
        // 先找到文件对象
        const fileObj = this.$refs.inp.files[0]
        // console.log(fileObj)
        // 转成base64的字符串格式
        const fr = new FileReader()
        fr.readAsDataURL(fileObj)
        // // 最后把这个字符串赋值给img.src
        // 下面的事件处理函数，必须使用箭头函数。否则this就表示事件源fr了
        fr.onload = () => {
          // console.log(fr.result)
          this.url = fr.result
        }
      } else {
        // 说明没有选择图片 恢复url为空
        this.url = ''
      }
    },

    // 点击上传图片 调用API方法 更新头像
    async updateAvatar() {
      // 调用API方法 更新头像
      const { data: res } = await updateImgAPI(this.url)
      console.log(res)
      if (res.code === 0) {
        // 提示更新头像成功信息
        this.$message.success(res.message)
        // 重新获取服务端数据 更新至vuex中
        this.$store.dispatch('user/getUser')
      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  font-size: 13px;
}
.mybtn {
  margin-top: 10px;
  .el-button {
    margin-right: 15px;
  }
}
.preview {
  width: 350px;
  height: 350px;
}
</style>
